<template>
    <section>
        <two-ceil></two-ceil>
        <div class="wrap">
            <div class="shareBox">
                <div class="shareBanner"></div>
                <div class="shareInfo">
                    <header>
                        您的专属邀请链接
                    </header>
                    <section v-if="user.userInfo">
                        <div class="copyBox">
                            <input type="text" v-model="local" id="input_url"> <button @click="copyClick">复制</button>
                        </div>
                        <div class="shareWeChat">
                            <button @click="weWatchClick"><i></i>微信分享</button>
                        </div>
                        <div class="friendDynamic">
                            <h3>好友动态</h3>
                            <ul>
                                <li class="clearfix" v-for="item in friendDynamicArr" :key="item.invited_id">
                                    <img :src="item.invited_avatar" alt="">
                                    <span>{{item.invited_username}}</span>
                                    <span>{{item.created_at}}</span>
                                    <span>领取了7天VIP</span>
                                </li>
                            </ul>
                            <div class="noDynamic" v-if="!friendDynamicArr.length">
                                <span>暂无好友获赠</span>
                                <span></span>
                            </div>
                            <div class="lookMore" v-if="lookMoreNext">
                                <button @click="moreBtn">
                                    查看更多
                                    <i></i>
                                </button>
                            </div>
                        </div>
                    </section>
                    <section class="loginLook" v-else>
                        <button  @click="loginShow">登录查看</button>
                        <div class="loginLookFriend">
                            <p>好友动态</p>
                            <p class="noDynamic">
                                <span @click="weWatchClick">暂无好友获赠</span>    
                                <span></span>
                            </p>
                        </div>
                    </section>
                    <footer class="shareInfoFoot">
                        <h3>活动细则</h3>
                        <ul>
                            <li>1.您邀请的好友成功注册，即可获赠7天集设网VIP会员特权</li>
                            <li>2.每成功邀请一个好友注册，您可获赠7天集设网VIP会员特权</li>
                            <li>3.每一个手机号仅可注册一次，已经注册用户无法直接获赠</li>
                            <li>4.邀请好友注册的VIP时长可叠加</li>
                        </ul>
                    </footer>
                </div>
            </div>
        </div>
        <div v-show="scanning" class="shareScanning" @click="closeWewatch">
            <div class="erweima">
                <div id="qrcode">正在生成二维码，请稍后...</div>
            </div>
        </div>
    </section>
</template>
<script>
import twoCeil from '../twoCeil';
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import QRCode from 'qrcodejs2'
export default {
    data(){
        return{
            local:'',//分享的地址
            scanning:false,//二维码弹窗
            loginShowHide:true,//是否请求过
            onlycode:null,//唯一邀请码
            friendDynamicArr:null,//好友动态列表
            lookMoreNext:null,//查看更多按钮
        }
    },
    methods:{
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        moreBtn(){//查看更多
            axios.get(this.lookMoreNext).then(response=>{
                this.friendDynamicArr.push(...response.data.data);
                this.lookMoreNext = response.data.links.next;
            })
        },
        successPoint(msg) {//注册成功的提示
            this.$message({
                message: '恭喜你，'+msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        weWatchClick(){//微信分享
            this.scanning = true;//二维码弹窗显示
            this.qrcode(this.onlycode);
        },
        closeWewatch(){
            this.scanning = false;//二维码弹窗隐藏
        },
        copyClick(){//复制事件
  			var input = document.getElementById('input_url');
			input.select();
            document.execCommand("Copy");
            this.successPoint("已成功复制至剪贴板")
          },
        qrcode(code){//生成二维码
        var This = this;
            $("#qrcode").html("");
            let qrcode = new QRCode('qrcode', {
                "width": 120,
                "height": 120, // 高度
                "text": appPath+'mobile?onlycode='+This.onlycode, // 二维码内容
                "render": 'table'
            })
        },
    },
    created () {
        $('#app').removeAttr('style');
        if(window.localStorage.getItem('jwt_token')){
            this.loginShowHide = false;
            axios.get('/onlycode').then(response=>{
                this.onlycode = response.data.invitecode;
                this.local = appPath+"shareLogin?onlycode="+this.onlycode;
                this.friendDynamicArr = response.data.data;
                this.lookMoreNext = response.data.links.next;
                
            })
        }
    },
    updated(){
        if(this.loginShowHide){
            axios.get('/onlycode').then(response=>{
                this.onlycode = response.data.invitecode;
                this.local = appPath+"shareLogin?onlycode="+this.onlycode;
                this.friendDynamicArr = response.data.data;
                this.lookMoreNext = response.data.links.next;
                this.loginShowHide = false;
            })
        }
        
    },
    components:{
        twoCeil,
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    metaInfo: {
      title: '优质的室内设计素材网站_集设网', // set a title
      meta: [
            {                 // set meta
                name: 'keyWords',
                content: '3D模型_3d模型免费下载_3dmax模型_3D模型素材下载_预算模板_预算方案_施工图下载_cad图库图块_设计案例下载_SU模型下载_材质贴图_汇报方案_软装模板_软装方案'
            },
            {                 // set meta
                name: 'description',
                content: '集设网，优质的室内设计素材网站'
            }
      ]
    }
}
</script>
<style>
    .shareBox{
        min-height: 1094px;
        border-radius: 5px;
        background: #fff;
        margin-top: 10px;
        margin-bottom: 28px;
        padding-top: 11px;
        padding-left: 13px;
    }
    .shareBanner{
        width: 1235px;
        height: 490px;
        background: url(http://www.jishe.com/imagecache/original/image/20190116/31c5bfaabbedc4a2667fdd9b7a26a2db.png) no-repeat center;
        margin-bottom: 20px;
    }
    .shareInfo{
        text-align: center;
    }
    .shareInfo header{
        font-size: 20px;
        line-height: 60px;
        font-weight: bold;
        color: #333333;
    }
    .loginLook button{
        width: 125px;
        font-size: 16px;
        line-height: 32px;
        color: #fff;
        background: #ea514b;
        padding: 0;
        border: none;
        letter-spacing: 2px;
        border-radius: 3px;
        outline: none;
    }
    .loginLook button:hover{
        background: #ec817c;
    }
    .loginLookFriend{
        margin-top: 30px;
    }
    .loginLookFriend p:nth-of-type(1){
        font-size:20px;
        line-height: 70px;
        font-weight: bold;
        color: #333;
    }
    .noDynamic{
        position:relative;
        height: 66px;
    }
    .noDynamic span:nth-of-type(1){
        position:absolute;
        z-index: 2;
        width: 188px;
        background: #fff;
        font-size: 16px;
        line-height: 66px;
        color: #666666;
        right: 535px;
    }
    .noDynamic span:nth-of-type(2){
        position: absolute;
        width: 384px;
        border-top: 1px solid #ddd;
        top: 33px;
        right: 437px;
    }
    .shareInfoFoot{
        margin-top: 32px;
        text-align: center;
    }
    .shareInfoFoot h3{
        font-size: 20px;
        line-height: 74px;
        font-weight: bold;
        color: #333;
    }
    .shareInfoFoot ul{
        width: 450px;
        text-align: left;
        margin: 0 auto;
    }
    .shareInfoFoot li{
        font-size: 16px;
        height: 32px;
        color: #333;
    }
    .copyBox input{
        width: 282px;
        font-size: 16px;
        line-height: 36px;
        color: #333;
        background: #fafafa;
        padding: 0;
        outline: none;
        border: 1px solid #ddd;
        padding-left: 10px;
    }
    .copyBox button{
        width: 74px;
        font-size: 16px;
        line-height: 38px;
        color: #fff;
        background: #ea514b;
        text-align: center;
        padding: 0;
        border: none;
        outline: none;
        margin-left: 1px;
    }
    .copyBox button:hover,.shareWeChat button:hover{
        background: #ec817c;
    }
    .shareWeChat{
        margin-top: 26px;
        margin-bottom: 19px;
    }
    .shareWeChat button{
        width: 177px;
        font-size: 16px;
        line-height: 38px;
        color: #fff;
        background: #ea514b;
        text-align: center;
        padding: 0;
        border: none;
        outline: none;
    }
    .shareWeChat i{
        display:inline-block;
        width:28px;
        height: 22px;
        background: url(./img/weWatchShare.png) no-repeat center;
        margin-right: 8px;
        margin-top: -3px;
        vertical-align:middle;
    }
    .friendDynamic h3{
        font-size: 20px;
        line-height: 76px;
        color: #333;
        font-weight: bold;
    }
    .friendDynamic ul{
        text-align: left;
        margin: 0 auto;
        width: 654px;
    }
    .friendDynamic li{
        font-size: 16px;
        line-height: 50px;
        margin-bottom: 6px;
        border: 1px solid #ddd;
        padding-left: 79px;
    }
    .friendDynamic li img{
        float:left;
        width: 32px;
        height: 32px;
        margin-right: 22px;
        margin-top: 10px;
        border-radius: 50%;
    }
    .friendDynamic li span{
        float:left;
    }
    .friendDynamic li span:nth-of-type(1){
        width: 85px;
        margin-right: 59px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .friendDynamic li span:nth-of-type(2){
        width: 135px;
        margin-right: 80px;
    }
    .friendDynamic li span:nth-of-type(3){
        color: #ec5c57;
    }
    .lookMore button{
        width: 56px;
        height: 48px;
        font-size: 14px;
        line-height: 38px;
        color: #b3b3b3;
        border: none;
        padding: 0;
        outline: none;
        background: transparent;
        position:relative;
    }
    .lookMore button i{
        position: absolute;
        bottom: 0;
        left: 22px;
        width: 10px;
        height: 10px;
        background: url(./img/more.png) no-repeat center;
    }
    .shareScanning{
        position: fixed;
        top: 0;
        left:0;
        z-index:999;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.45);
    }
    .shareScanning .erweima{
        width: 150px;
        height: 150px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        top: 40%;
        left: 50%;
        bottom: 50%;
        right:50%;
    }
    .shareScanning .erweima #qrcode{
        margin-top: 15px;
        margin-left: 15px;
    }
</style>
